import React from "react";
import { Empty } from "antd";
import "./shopList.scss";
class ShopList extends React.Component {
  constructor(props) {
    super(props);
    this["scrollObj"] = React.createRef();
    this.state = {
      list: [
        {
          image:
            "https://img12.360buyimg.com/jdphoto/s72x72_jfs/t6160/14/2008729947/2754/7d512a86/595c3aeeNa89ddf71.png",
          value: "领取中心"
        },
        {
          image:
            "https://img20.360buyimg.com/jdphoto/s72x72_jfs/t15151/308/1012305375/2300/536ee6ef/5a411466N040a074b.png",
          value: "找折扣"
        },
        {
          image:
            "https://img10.360buyimg.com/jdphoto/s72x72_jfs/t5872/209/5240187906/2872/8fa98cd/595c3b2aN4155b931.png",
          value: "领会员"
        },
        {
          image:
            "https://img12.360buyimg.com/jdphoto/s72x72_jfs/t10660/330/203667368/1672/801735d7/59c85643N31e68303.png",
          value: "新品首发"
        },
        {
          image:
            "https://img14.360buyimg.com/jdphoto/s72x72_jfs/t17251/336/1311038817/3177/72595a07/5ac44618Na1db7b09.png",
          value: "领京豆"
        },
        {
          image:
            "https://img30.360buyimg.com/jdphoto/s72x72_jfs/t5770/97/5184449507/2423/294d5f95/595c3b4dNbc6bc95d.png",
          value: "手机馆"
        }
      ]
    };
  }
  Data = () => {
    return {
      aa: 1
    };
  };
  render(h) {
    return (
      // JSX
      <div>
        <Empty />

        <div className="ul" style={{ overflow: "hidden", padding: "5px" }}>
          {this.state.list.map((item, index) => {
            return (
              <div
                className={`pic li ${
                  index > this.state.list.length - 4 ? "last" : null
                }`}
                key={index}
              >
                <img src={item.image} />
                <p>{item.value}</p>
              </div>
            );
          })}
        </div>

        <p ref={this["scrollObj"]}></p>
        <div style={{ height: "1000px" }}></div>
      </div>
    );
  }
  async test() {
    var timeOut = Math.random() * 2;
    if (timeOut > 1) {
      return (await timeOut) + "返回成功";
    } else {
      throw (await "小于1喽") + timeOut;
    }
  }
  componentDidMount() {
    let p1 = this.test();
    p1.then(res => {
      console.log(res, "then");
    }).catch(err => {
      console.log(err, "err");
    });
    // 视图交叉观察器 new IntersectionObserver(callback,options);
    let io = new IntersectionObserver(
      function(arr) {
        console.log(arr[0].intersectionRatio);
      },
      {
        threshold: [0, 0.25, 0.5, 0.75, 1]
      }
    );
    io.observe(this["scrollObj"]["current"]);
  }
}
export default ShopList;
